import { getFollowStatus, fetchAndStorePrompts, getAuthInfo, getChatOrderData } from './whatsappApi.js';
import { SELECTORS } from './defines';
import { createApp } from 'vue';
import { addTranslationStyles, debouncedHandleChatChange, initAutoTranslate } from './messageTranslator';
import { debouncedFetchAndCacheCurrentChatMessages } from './messageSync';
import {list} from "postcss";
import { getAutoAIReply } from './erpapi';
import ToastMessage from '../components/ToastMessage.vue';
import { getCurrentWhatsAppUserId } from './react_extract';

// 创建 ToastMessage 组件实例
const toastApp = createApp(ToastMessage);
const toastInstance = toastApp.mount(document.createElement('div'));
document.body.appendChild(toastInstance.$el);

// 获取 showToast 函数
const showToast = (message: string, duration = 2000, isSuccess = true) => {
    (toastInstance as any).showToast(message, duration, isSuccess);
};

// 获取当前聊天 ID
export function getCurrentChatId(): string | null {
    const messageContainer = document.querySelector('[data-id]');
    if (messageContainer) {
        const dataId = messageContainer.getAttribute('data-id');
        if (dataId) {
            const parts = dataId.split('_');
            if (parts.length > 1) {
                return parts[1]; // 返回类似 "85293364278@c.us" 的ID
            }
        }
    }
    return null;
}

// 检查是否是群组聊天
export function isGroupChat(chatId: string): boolean {
    return chatId ? chatId.endsWith('@g.us') : false;
}

// 获取群组成员列表
export function getGroupMembers(chatId: string): Array<{serialized: string, name: string}> {
    if (!isGroupChat(chatId)) {
        return [];
    }

    const members: Array<{serialized: string, name: string}> = [];
    
    try {
        // 从消息中提取群组成员信息
        const messageRows = document.querySelectorAll('#main div[role="row"]');
        const memberMap = new Map<string, string>();
        
        messageRows.forEach(row => {
            const messageDiv = row.querySelector('div[data-id]');
            if (!messageDiv) return;

            const dataId = messageDiv.getAttribute('data-id');
            if (!dataId) return;

            const parts = dataId.split('_');
            if (parts.length < 4) return; // 群组消息应该有4个部分

            const [, remoteJid, , participantJid] = parts;
            
            // 确保这是当前群组的消息
            if (remoteJid !== chatId) return;
            
            if (participantJid) {
                // 获取发送者名称
                const prePlainDiv = row.querySelector('div[data-pre-plain-text]');
                if (prePlainDiv) {
                    const prePlainText = prePlainDiv.getAttribute('data-pre-plain-text') || '';
                    const match = prePlainText.match(/\[(.*?)\]\s*(.*?):/);
                    if (match && match[2]) {
                        const senderName = match[2].trim();
                        if (senderName && senderName !== '您') {
                            memberMap.set(participantJid, senderName);
                        }
                    }
                }
            }
        });
        
        // 转换为数组格式
        memberMap.forEach((name, serialized) => {
            members.push({ serialized, name });
        });
        
        // 按名称排序
        members.sort((a, b) => a.name.localeCompare(b.name));
        
    } catch (error) {
        console.error('获取群组成员失败:', error);
    }
    
    return members;
}

// 获取聊天标题
export function getChatTitle(): string {
    // 使用老代码中的选择器
    const titleElement = document.querySelector('#main span[dir="auto"]');
    if (titleElement) {
        return titleElement.textContent?.trim() || '';
    }
    
    // 如果找不到，尝试使用当前的选择器作为备选
    const backupTitleElement = document.querySelector(SELECTORS.WHATSAPP_TITLE_SPAN);
    return backupTitleElement ? backupTitleElement.getAttribute('title') || '' : '';
}

// 获取图像
export function getChatImage(chatId: string): string {
    // '#main header img'
    // 先定位到有属性data-kiki-chat-id=chatId的元素
    const chatItem = document.querySelector(`[data-kiki-chat-id="${chatId}"]`);
    if (!chatItem) return '';
    // 获取元素下面img
    const imageElement = chatItem?.querySelector('img');
    if (!imageElement) return '';
    // 获取img的src
    const src = imageElement.getAttribute('src');   
    if (!src) return '';
    return src;
}

// 定义订单数据接口
interface OrderData {
  order_no: string;
  name: string;
  order_name: string;
  order_state_name: string;
  status: string;
  remarks: [{
    content?: string;
    note?: string;
    [key: string]: any;
  }];
  order_note: string;
  remark?: string; // 添加可选的 remark 字段，与 order_note 保持一致
  operation_suggestion: string;
  created_at: string;
  ai_reply?: string;
  ChatRemind: {
    success?: boolean;
    content?: string;
    [key: string]: any;
  };
  follow_status: string;
  nickname: string;
}

// 更新聊天标题和状态的映射关系
async function updateChatTitleStatusMap(chatTitle: string, status: string): Promise<void> {
    try {
        if (!chatTitle || !status) return;
        
        // 从Chrome存储中获取现有的映射
        const result = await new Promise<{[key: string]: any}>((resolve) => {
            chrome.storage.local.get(['kiki_chat_title_map'], resolve);
        });
        
        const titleMap = result['kiki_chat_title_map'] || {};
        
        // 更新映射
        titleMap[chatTitle] = status;
        
        // 保存回Chrome存储
        await chrome.storage.local.set({ 'kiki_chat_title_map': titleMap });
        
        // 同时更新全局变量
        (window as any).kikiChatTitleMap = titleMap;
        
        // console.log('已更新聊天标题状态映射:', chatTitle, status);
    } catch (error) {
        console.error('更新聊天标题状态映射失败:', error);
    }
}

// 定义存储键前缀
const STORAGE_KEY_PREFIX = 'kiki_chat_order_';

// 获取缓存的订单数据
async function getCachedOrderData(chatId: string): Promise<OrderData | null> {
    try {
        const storageKey = STORAGE_KEY_PREFIX + chatId;
        const result = await new Promise<{[key: string]: any}>((resolve) => {
            chrome.storage.local.get([storageKey], resolve);
        });
        
        const cachedData = result[storageKey] as OrderData;
        // console.log('从 Chrome 存储获取缓存的订单数据:', chatId, cachedData);
        return cachedData || null;
    } catch (error) {
        console.error('获取缓存订单数据失败:', error);
        return null;
    }
}

// 设置缓存的订单数据
export async function setCachedOrderData(chatId: string, data: OrderData): Promise<void> {
    try {
        const storageKey = STORAGE_KEY_PREFIX + chatId;
        await chrome.storage.local.set({ [storageKey]: data });
        //console.log('订单数据已保存到 Chrome 存储:', chatId, data);
    } catch (error) {
        console.error('保存订单数据到缓存失败:', error);
    }
}

// 清除指定聊天的缓存数据
export async function clearCachedOrderData(chatId: string): Promise<void> {
    try {
        const storageKey = STORAGE_KEY_PREFIX + chatId;
        await chrome.storage.local.remove(storageKey);
        console.log('已清除缓存的订单数据:', chatId);
    } catch (error) {
        console.error('清除缓存订单数据失败:', error);
    }
}

// 添加一个请求跟踪对象，用于防止重复调用
const pendingRequests: { [key: string]: Promise<OrderData | null> } = {};

// 添加一个标志，用于防止循环调用
let isProcessingChatChange = false;

export async function getChatDataUnified(chatId: string, forceRefresh: boolean = false): Promise<OrderData | null> {
    try {
        // 如果已经有相同的请求正在进行中，直接返回该请求的Promise
        const requestKey = `${chatId}-${forceRefresh}`;
        if (requestKey in pendingRequests) {
            console.log('已有相同请求正在进行中，复用请求:', chatId);
            return pendingRequests[requestKey];
        }

        console.log('统一获取聊天数据函数被调用，chatId:', chatId, '强制刷新:', forceRefresh);
        
        // 创建新的请求Promise并存储
        const requestPromise = (async () => {
            try {
                // 如果不是强制刷新，先检查缓存中是否有数据
                if (!forceRefresh) {
                    const cachedData = await getCachedOrderData(chatId);
                    if (cachedData) {
                        console.log('从缓存中获取订单数据:', chatId);
                        return cachedData;
                    }
                } else {
                    console.log('强制从 API 获取订单数据:', chatId);
                }
                
                // 缓存中没有数据或需要强制刷新，调用 API 获取
                console.log('从 API 获取订单数据:', chatId);
                const chatData = await getChatOrderData(chatId);
                
                // 如果没有获取到数据，返回 null
                if (!chatData) {
                    return null;
                }
                
                // 将 chatData 转换为 OrderData 格式
                const orderData: OrderData = {
                    nickname: chatData.nickname || '',
                    order_no: chatData.order_no || '',
                    status: chatData.crmorder?.crmorderstate_name || chatData.status || '',
                    order_state_name: chatData.crmorder?.crmorderstate_name || '',
                    order_note: chatData.crmorder?.note || '',
                    remarks: chatData.remarks || [],
                    operation_suggestion: chatData.operation_suggestion || '',
                    order_name: chatData.crmorder?.name || '',
                    name: chatData.name || '',
                    created_at: chatData.created_at || '',
                    ChatRemind: chatData.ChatRemind || {},
                    follow_status: chatData.follow_status || '',
                    remark: chatData.remark || '',
                };
                
                // 检查是否需要自动打开修改对话框
                if (chatData.project_id === 14 && !chatData.sales_manager_id) {
                    console.log('检测到 project_id=14 且没有设置负责人，准备自动打开修改对话框');
                    // 延迟一小段时间以确保UI已完全加载，同时验证聊天ID是否仍然一致
                    setTimeout(() => {
                        // 在弹窗前验证当前聊天ID是否还是原来请求的chatId
                        const currentChatId = getCurrentChatId();
                        if (currentChatId === chatId) {
                            console.log('聊天ID一致，打开修改对话框:', chatId);
                            triggerModifyInfoDialog(chatId);
                        } else {
                            console.log('聊天ID已变化，取消打开修改对话框。原始:', chatId, '当前:', currentChatId);
                        }
                    }, 500);
                }
                
                // 将数据存储到缓存中
                await setCachedOrderData(chatId, orderData);
                
                return orderData;
            } finally {
                // 请求完成后，从pendingRequests中删除
                delete pendingRequests[requestKey];
            }
        })();
        
        // 存储请求Promise
        pendingRequests[requestKey] = requestPromise;
        
        return requestPromise;
    } catch (error) {
        console.error('获取订单数据失败:', error);
        return null;
    }
}

// 防抖版本的 getChatOrderData
const debouncedGetChatOrderData = debounce(getChatDataUnified, 500);

// 定义自定义事件类型
interface AIReplyErrorEvent extends CustomEvent {
    detail: {
        chatId: string;
        error: string;
    };
}

// 初始化 WhatsApp 页面处理
export function whatsappHandler(): () => void {
    console.log('WhatsApp Handler 初始化');
    
    // 添加消息监听器，处理popup的请求
    const messageListener = (message: any, sender: chrome.runtime.MessageSender, sendResponse: (response?: any) => void) => {
        console.log('WhatsApp Handler 收到消息:', message);
        
        if (message.action === 'getCurrentWhatsAppUserId') {
            console.log('收到获取WhatsApp用户ID的请求');
            getCurrentWhatsAppUserId().then((userId) => {
                console.log('获取到WhatsApp用户ID:', userId);
                sendResponse({ userId: userId });
            });
            return true; // 返回true表示将异步发送响应
        }
        
        // 其他消息处理...
    };
    
    chrome.runtime.onMessage.addListener(messageListener);
    
    const initialize = async () => {
        console.log('初始化 WhatsApp Handler');
        
        // 初始化全局聊天标题状态映射
        try {
            const result = await new Promise<{[key: string]: any}>((resolve) => {
                chrome.storage.local.get(['kiki_chat_title_map'], resolve);
            });
            
            const titleMap = result['kiki_chat_title_map'] || {};
            
            // 设置全局变量，使页面脚本可以访问
            (window as any).kikiChatTitleMap = titleMap;
            
            console.log('已初始化全局聊天标题映射, 条目数:', Object.keys(titleMap).length);
        } catch (error) {
            console.error('初始化全局聊天标题映射失败:', error);
            (window as any).kikiChatTitleMap = {};
        }
        
        // 监听 add-user-button-clicked 事件
        window.addEventListener('add-user-button-clicked', () => {
            console.log('发送新消息按钮被点击');
            showAddUserDialog();
        });

        // 添加监听器处理页面脚本的消息
        window.addEventListener('message', async (event) => {
            // 确保消息来自同一窗口
            if (event.source !== window) return;
            
            // 处理来自页面的消息
            if (event.data && event.data.type === 'FROM_WHATSAPP_PAGE') {
                if (event.data.action === 'CHECK_CACHE_AND_UPDATE_LABEL') {
                    const chatId = event.data.chatId;
                    if (chatId) {
                        // 检查缓存数据
                        // console.log('whatsappHandler -> chatId', chatId);
                        const cachedData = await getCachedOrderData(chatId);
                        if (cachedData && cachedData.follow_status) {
                            // 直接执行更新标签操作
                            // console.log('直接更新聊天标签:', chatId, cachedData.follow_status);
                            
                            // 获取聊天标题
                            const chatTitle = cachedData.name || cachedData.nickname || '';
                            if (chatTitle) {
                                // 保存标题和状态的映射关系
                                await updateChatTitleStatusMap(chatTitle, cachedData.follow_status);
                                
                                // 在更新完映射后，发送消息给页面脚本更新全局变量
                                try {
                                    const result = await new Promise<{[key: string]: any}>((resolve) => {
                                        chrome.storage.local.get(['kiki_chat_title_map'], resolve);
                                    });
                                    
                                    const titleMap = result['kiki_chat_title_map'] || {};
                                    
                                    window.postMessage({
                                        type: 'FROM_KIKIMAMI_EXTENSION',
                                        action: 'UPDATE_STATUS_LABELS_DATA',
                                        titleMap: titleMap
                                    }, '*');
                                } catch (error) {
                                    console.error('获取标题映射失败:', error);
                                }
                            }
                            
                            // 立即更新标签
                            if (typeof window.forceUpdateStatusLabels === 'function') {
                                window.forceUpdateStatusLabels();
                            } else {
                                // 如果全局函数不可用，仍然发送消息以确保兼容性
                                window.postMessage({
                                    type: 'FROM_KIKIMAMI_EXTENSION',
                                    action: 'UPDATE_STATUS_LABELS'
                                }, '*');
                            }
                            
                            // console.log('已完成更新聊天ID的标签:', chatId);
                        }else {
                            // 向后台服务器获取
                            const chatData = await debouncedGetChatOrderData(chatId, true);
                        }
                    }
                } else if (event.data.action === 'PAGE_LOADED') {
                    // 页面已加载完成，可以执行初始化任务
                    console.log('收到页面加载完成消息，执行标签初始化');
                    setTimeout(() => {
                        window.postMessage({
                            type: 'FROM_KIKIMAMI_EXTENSION',
                            action: 'UPDATE_STATUS_LABELS'
                        }, '*');
                    }, 1000);
                }
            }
        });
        
        // 添加翻译样式
        addTranslationStyles();
        
        // 初始化自动翻译设置
        await initAutoTranslate();
        
        // 初始化 Vue 应用
        await initVueApp();
        
        // 设置 DOM 观察者
        const observer = observeDOM();
        
        // 初始尝试插入 OrderInfoBar 和翻译按钮
        const initializeUI = () => {
            insertOrderInfoBar();
            
            // 触发 chat-changed 事件
            const chatId = getCurrentChatId();
            if (chatId) {
                // 使用节流函数处理聊天变化
                throttledHandleChatChange(chatId);
            }
            
            // 初始化时添加翻译按钮
            debouncedHandleChatChange();
            
            // 初始化时同步消息到后台（使用防抖版本）
            debouncedFetchAndCacheCurrentChatMessages();
        };
        
        // 立即尝试初始化一次
        initializeUI();
        
        // 1秒后再次尝试初始化，确保DOM已完全加载
        setTimeout(initializeUI, 1000);
        
        // 3秒后再次尝试初始化，处理慢速加载的情况
        setTimeout(initializeUI, 3000);
    };

    // 页面加载完成时初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initialize);
    } else {
        initialize();
    }

    // 返回清理函数
    return () => {
        console.log('WhatsApp 处理器清理中...');
        // 移除消息监听器
        chrome.runtime.onMessage.removeListener(messageListener);
        // 其他清理逻辑
    };
}

// 创建对话header顶部按钮的工具函数
function createButton(text: string, title: string, onClick: (e: MouseEvent) => void, textColor?: string): HTMLButtonElement {
    const button = document.createElement('button');
    button.className = 'kiki-action-button';
    button.title = title;
    button.textContent = text;
    
    // 默认样式，没有背景色
    let buttonColor = textColor || '#0088cc'; // 默认蓝色文字
    
    // 如果是警告按钮（包含⚠️），保持原始颜色
    if (text.includes('⚠️')) {
        buttonColor = 'inherit';
    }
    
    button.style.cssText = `
        padding: 6px 6px;
        margin: 0 4px;
        border: none;
        border-radius: 4px;
        background-color: transparent;
        color: ${buttonColor};
        font-size: 13px;
        cursor: pointer;
        transition: color 0.2s;
    `;
    button.onclick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        onClick(e);
    };
    return button;
}

// 创建发送新消息按钮
function createAddUserButton(): HTMLButtonElement {
    return createButton('加人', '发送新消息给新用户', () => {
        showAddUserDialog();
    });
}

// 显示添加用户对话框
function showAddUserDialog() {
    // 创建对话框
    const dialog = document.createElement('div');
    dialog.className = 'kiki-dialog';
    dialog.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    `;

    // 创建对话框内容
    const content = document.createElement('div');
    content.className = 'kiki-dialog-content';
    content.style.cssText = `
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        width: 400px;
        max-width: 90%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    `;

    // 创建标题
    const title = document.createElement('h3');
    title.textContent = '发送新消息';
    title.style.cssText = `
        margin-top: 0;
        padding-bottom: 20px;
        color: #128c7e;
    `;

    // 创建表单
    const form = document.createElement('form');
    form.style.cssText = `
        display: flex;
        flex-direction: column;
        gap: 15px;
    `;

    // 国家代码输入
    const countryCodeGroup = document.createElement('div');
    countryCodeGroup.style.cssText = `
        display: flex;
        flex-direction: column;
        gap: 5px;
    `;
    
    const countryCodeLabel = document.createElement('label');
    countryCodeLabel.textContent = '国家代码:';
    countryCodeLabel.style.cssText = `
        font-weight: bold;
    `;
    
    const countryCodeInput = document.createElement('input');
    countryCodeInput.type = 'text';
    countryCodeInput.name = 'country_code';
    countryCodeInput.value = '86'; // 默认中国
    countryCodeInput.style.cssText = `
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    `;
    
    countryCodeGroup.appendChild(countryCodeLabel);
    countryCodeGroup.appendChild(countryCodeInput);

    // 电话号码输入
    const phoneGroup = document.createElement('div');
    phoneGroup.style.cssText = `
        display: flex;
        flex-direction: column;
        gap: 5px;
    `;
    
    const phoneLabel = document.createElement('label');
    phoneLabel.textContent = '电话号码:';
    phoneLabel.style.cssText = `
        font-weight: bold;
    `;
    
    const phoneInput = document.createElement('input');
    phoneInput.type = 'text';
    phoneInput.name = 'phone_number';
    phoneInput.placeholder = '输入电话号码（不含国家代码）';
    phoneInput.style.cssText = `
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    `;
    
    phoneGroup.appendChild(phoneLabel);
    phoneGroup.appendChild(phoneInput);

    // 消息输入
    const messageGroup = document.createElement('div');
    messageGroup.style.cssText = `
        display: flex;
        flex-direction: column;
        gap: 5px;
    `;
    
    const messageLabel = document.createElement('label');
    messageLabel.textContent = '消息内容:';
    messageLabel.style.cssText = `
        font-weight: bold;
    `;
    
    const messageInput = document.createElement('textarea');
    messageInput.name = 'message';
    messageInput.placeholder = '输入要发送的消息（可选）';
    messageInput.rows = 4;
    messageInput.style.cssText = `
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        resize: vertical;
    `;
    
    messageGroup.appendChild(messageLabel);
    messageGroup.appendChild(messageInput);

    // 按钮组
    const buttonGroup = document.createElement('div');
    buttonGroup.style.cssText = `
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 10px;
    `;
    
    // 取消按钮
    const cancelButton = document.createElement('button');
    cancelButton.textContent = '取消';
    cancelButton.type = 'button';
    cancelButton.style.cssText = `
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        background-color: #f1f1f1;
        cursor: pointer;
    `;
    cancelButton.onclick = () => {
        document.body.removeChild(dialog);
    };
    
    // 发送按钮
    const submitButton = document.createElement('button');
    submitButton.textContent = '发送';
    submitButton.type = 'button';
    submitButton.style.cssText = `
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        background-color: #128c7e;
        color: white;
        cursor: pointer;
    `;
    
    // 发送按钮点击事件
    submitButton.onclick = () => {
        const countryCode = countryCodeInput.value.trim();
        const phoneNumber = phoneInput.value.trim();
        const message = messageInput.value.trim();

        if (!phoneNumber) {
            alert('请输入手机号码');
            return;
        }

        // 处理电话号码格式
        let formattedNumber = phoneNumber;
        if (formattedNumber.startsWith('0')) {
            formattedNumber = formattedNumber.slice(1);
        }

        // 移除非数字字符
        formattedNumber = formattedNumber.replace(/\D/g, '');
        const cleanCountryCode = countryCode.replace(/\D/g, '');

        // 构建WhatsApp URL
        const whatsappNumber = `${cleanCountryCode}${formattedNumber}`;
        const encodedMessage = encodeURIComponent(message);
        const whatsappUrl = `https://web.whatsapp.com/send?phone=${whatsappNumber}&text=${encodedMessage}`;

        // 在当前页面打开
        window.open(whatsappUrl, '_self');
        document.body.removeChild(dialog);
    };
    
    buttonGroup.appendChild(cancelButton);
    buttonGroup.appendChild(submitButton);

    // 组装表单
    form.appendChild(countryCodeGroup);
    form.appendChild(phoneGroup);
    form.appendChild(messageGroup);
    form.appendChild(buttonGroup);

    // 组装对话框
    content.appendChild(title);
    content.appendChild(form);
    dialog.appendChild(content);

    // 添加到页面
    document.body.appendChild(dialog);

    // 聚焦到电话号码输入框
    phoneInput.focus();
}

async function insertOrderInfoBar() {
    // 查找 WhatsApp 对话的 header
    const targetElement = document.querySelector('#main header');
    if (!targetElement) {
        console.log('未找到 WhatsApp 对话的 header');
        return;
    }

    // 获取当前聊天 ID
    const chatId = getCurrentChatId();
    if (!chatId) {
        console.log('未找到当前聊天 ID');
        return;
    }

    // 从缓存中获取订单数据，避免重复调用 API
    let orderData = await getCachedOrderData(chatId);
    
    // 检查是否已存在按钮容器
    let container = targetElement.querySelector('.kiki-button-container') as HTMLDivElement;
    if (!container) {
        // 创建按钮容器
        container = document.createElement('div');
        container.className = 'kiki-button-container';
        container.style.cssText = `
            display: flex;
            align-items: center;
            margin-left: 10px;
        `;
    } else {
        // 如果已存在，清空内容以避免重复添加按钮
        container.innerHTML = '';
    }
    
    // 检查是否已存在 order-info-bar 容器
    // 修改：首先移除所有现有的 order-info-container，防止多个容器被创建
    const existingContainers = document.querySelectorAll('.order-info-container');
    existingContainers.forEach(container => container.remove());
    
    // 只有当有订单数据且有订单号时才创建 order-info-container
    if (orderData && orderData.order_no) {
        // 创建 order-info-container 容器
        const orderInfoBar = document.createElement('div');
        orderInfoBar.className = 'order-info-container';
        
        // 将容器插入到 header 后面
        targetElement.parentNode?.insertBefore(orderInfoBar, targetElement.nextSibling);
        
        // 触发事件通知 Vue 组件更新 order-info-bar
        const event = new CustomEvent('order-info-bar-created', {
            detail: { 
                chatId: chatId,
                orderData: orderData
            }
        });
        window.dispatchEvent(event);
    }
    
    // 如果存在AI回复提醒，添加警告按钮（不依赖于订单号）
    if (orderData && orderData.ChatRemind && orderData.ChatRemind.success) {
        //增加一个⚠️按钮图标，点击之后弹出aiReplayAlert
        const aiReplyAlert = createButton('⚠️', 'AI回复提醒', async () => {
            try {
                // 从缓存中获取数据
                const storageKey = STORAGE_KEY_PREFIX + chatId;
                const result = await new Promise<{[key: string]: any}>((resolve) => {
                    chrome.storage.local.get([storageKey], resolve);
                });
                
                const cachedData = result[storageKey];
                if (cachedData && cachedData.ChatRemind) {
                    const structuredData = parseAiReply(cachedData.ChatRemind.content || '');
                    if (structuredData) {
                        const event = new CustomEvent('ai-reply-alert', {
                            detail: { 
                                data: structuredData,
                                chatId: chatId,
                                nickname: orderData?.name || getChatTitle()
                            }
                        });
                        window.dispatchEvent(event);
                    } else {
                        console.log('AI回复数据格式不正确', structuredData);
                        showToast('AI回复数据格式不正确', 3000, false);
                    }
                } else {
                    showToast('未找到缓存的AI回复数据', 3000, false);
                }
            } catch (error) {
                console.error('解析AI回复数据出错:', error);
                showToast('解析AI回复数据失败', 3000, false);
            }
        });
        container.appendChild(aiReplyAlert);
    } else {
        console.log('没有对话提醒消息，不显示提示按钮', orderData);
        
        // 添加生成AI回复建议按钮
        const generateAIReplyButton = createButton('💡', '生成AI回复建议', async () => {
            try {
                // 添加加载状态
                generateAIReplyButton.setAttribute('disabled', 'true');
                generateAIReplyButton.setAttribute('data-loading', 'true');
                generateAIReplyButton.textContent = '生成中...';

                const aiReply = await getAutoAIReply(chatId);
                if (aiReply) {
                    const structuredData = parseAiReply(aiReply);
                    if (structuredData) {
                        // 更新按钮为 ⚠️
                        generateAIReplyButton.textContent = '⚠️';
                        generateAIReplyButton.title = 'AI回复提醒';
                        
                        // 触发事件显示弹窗
                        const event = new CustomEvent('ai-reply-alert', {
                            detail: { 
                                data: structuredData,
                                chatId: chatId,
                                nickname: orderData?.name || getChatTitle()
                            }
                        });
                        window.dispatchEvent(event);
                    } else {
                        showToast('AI回复数据格式不正确', 3000, false);
                    }
                } else {
                    showToast('未获取到AI回复', 3000, false);
                }
            } catch (error) {
                console.error('生成AI回复建议出错:', error);
                showToast('生成AI回复失败，请重试', 3000, false);
            } finally {
                // 恢复按钮状态
                generateAIReplyButton.removeAttribute('disabled');
                generateAIReplyButton.removeAttribute('data-loading');
            }
        });
        container.appendChild(generateAIReplyButton);
    }
    
    // 添加修改信息按钮（不依赖于订单号）
    const modifyBtn = createButton('✏️', '修改信息', () => {
        // 触发修改信息事件
        const event = new CustomEvent('modify-info-button-clicked', {
            detail: { chatId }
        });
        document.dispatchEvent(event);
        window.dispatchEvent(event);
    });
    container.appendChild(modifyBtn);
    
    // 将容器添加到 header 中
    targetElement.appendChild(container);
}

/**
 * 触发修改信息对话框
 * @param chatId 聊天ID
 */
export function triggerModifyInfoDialog(chatId: string): void {
    // 触发修改信息事件
    const event = new CustomEvent('modify-info-button-clicked', {
        detail: { chatId }
    });
    document.dispatchEvent(event);
    window.dispatchEvent(event);
}

/**
 * 解析AI回复数据
 * @param aiReply AI回复字符串
 * @returns 解析后的数据
 */
function parseAiReply(aiReply: string): any {
    try {
        if (!aiReply) {
            return null;
        }
        
        // 移除可能存在的 HTML 标签
        let cleanedText = aiReply;
        
        // 移除开头的 HTML 标签，如 <p><code>json
        cleanedText = cleanedText.replace(/<p>.*?<code>.*?(\{)/s, '$1');
        
        // 移除结尾的 HTML 标签，如 </code></p>
        cleanedText = cleanedText.replace(/(\})\s*<\/code>.*?<\/p>\s*$/s, '$1');
        
        // 查找 JSON 开始的位置
        const jsonStartIndex = cleanedText.indexOf('{');
        if (jsonStartIndex >= 0) {
            const jsonPart = cleanedText.substring(jsonStartIndex);
            // 查找 JSON 结束的位置（最后一个 }）
            const lastBraceIndex = jsonPart.lastIndexOf('}');
            if (lastBraceIndex >= 0) {
                const cleanJsonPart = jsonPart.substring(0, lastBraceIndex + 1);
                return JSON.parse(cleanJsonPart);
            }
            return JSON.parse(jsonPart);
        }
        return null;
    } catch (error) {
        console.error('解析AI回复出错:', error);
        return null;
    }
}

// 防抖函数
function debounce(fn: Function, delay: number) {
    let timer: number | null = null;
    return function(...args: any[]) {
        if (timer) clearTimeout(timer);
        timer = window.setTimeout(() => {
            fn(...args);
            timer = null;
        }, delay);
    };
}

// 节流函数
function throttle(fn: Function, delay: number) {
    let lastCall = 0;
    return function(...args: any[]) {
        const now = Date.now();
        if (now - lastCall >= delay) {
            lastCall = now;
            fn(...args);
        }
    };
}

// 防抖版本的 insertOrderInfoBar
const debouncedInsertOrderInfoBar = debounce(insertOrderInfoBar, 500);

// 节流版本的聊天变化处理
const throttledHandleChatChange = throttle(function(chatId: string) {
    // 如果已经在处理聊天变化，则跳过
    if (isProcessingChatChange) {
        console.log('已经在处理聊天变化，跳过重复调用');
        return;
    }
    
    console.log('节流处理聊天变化:', chatId);
    
    // 设置标志，表示正在处理聊天变化
    isProcessingChatChange = true;
    
    try {
        // 触发聊天变化事件，强制重新获取数据
        const event = new CustomEvent('chat-changed', {
            detail: { 
                chatId: chatId,
                forceRefresh: true // 添加标志，表示需要强制刷新数据
            }
        });
        // 只触发一次事件，避免重复调用API
        window.dispatchEvent(event);
        
        // 使用防抖版本的函数
        debouncedInsertOrderInfoBar();
        
        // 聊天ID变化时，添加翻译按钮
        debouncedHandleChatChange();
        
        // 同步消息到后台（使用防抖版本）
        debouncedFetchAndCacheCurrentChatMessages();
    } finally {
        // 重置标志
        setTimeout(() => {
            isProcessingChatChange = false;
        }, 1000); // 1秒后重置标志，确保有足够时间完成处理
    }
}, 1000); // 1秒内只处理一次

function observeDOM() {
    const targetNode = document.body;
    const config: MutationObserverInit = { childList: true, subtree: true };
    let lastChatId: string | null = null;

    const callback = function(mutationsList: MutationRecord[], observer: MutationObserver) {
        // 获取当前聊天ID
        const currentChatId = getCurrentChatId();
        
        // 只有当聊天ID变化时才触发事件
        if (currentChatId && currentChatId !== lastChatId) {
            console.log('聊天ID变化:', lastChatId, '->', currentChatId);
            lastChatId = currentChatId;
            
            // 使用节流函数处理聊天变化
            throttledHandleChatChange(currentChatId);
        }
        
        // 检查 header 是否存在，如果存在但没有按钮容器，则检查是否需要插入
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                const header = document.querySelector('#main header');
                const buttonContainer = header?.querySelector('.kiki-button-container');
                
                // 只有当 header 存在但没有按钮容器时才尝试插入
                if (header && !buttonContainer && currentChatId) {
                    // 使用防抖版本的函数
                    debouncedInsertOrderInfoBar();
                    break; // 找到一个就跳出循环
                }
                
                // 检查是否有新消息添加
                const hasNewMessages = Array.from(mutation.addedNodes).some(node => {
                    if (node instanceof HTMLElement) {
                        // 检查是否是消息元素或者包含消息元素
                        return node.classList?.contains('message-in') || 
                               node.classList?.contains('message-out') ||
                               node.querySelector('.message-in, .message-out');
                    }
                    return false;
                });
                
                if (hasNewMessages) {
                    console.log('检测到新消息，添加翻译按钮');
                    debouncedHandleChatChange();
                    
                    // 同步消息到后台（使用防抖版本）
                    debouncedFetchAndCacheCurrentChatMessages();
                }
            }
        }
    };

    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
    return observer;
}

async function initVueApp() {
    // 创建容器元素
    const appContainer = document.createElement('div');
    appContainer.id = 'kiki-whatsapp-app';
    appContainer.style.cssText = `
        position: relative;
        z-index: 1000;
    `;
    document.body.appendChild(appContainer);
 
    // 动态导入 Vue 组件并挂载
    try {
        const { default: WhatsAppUI } = await import('../components/WhatsAppUI.vue');
        const app = createApp(WhatsAppUI);
        app.mount('#kiki-whatsapp-app');
        
        // 确保 OrderInfoBar 组件能够正确显示
        setTimeout(() => {
            debouncedInsertOrderInfoBar();
        }, 1000);
        
        // 初始化客户看板
        setTimeout(() => {
            initCustomerDashboard();
        }, 1500);
    } catch (error) {
        console.error('加载 Vue 组件失败:', error);
    }
}

// 初始化客户看板
async function initCustomerDashboard() {
    try {
        // 创建客户看板容器
        const dashboardContainer = document.createElement('div');
        dashboardContainer.id = 'kikimami-dashboard-container';
        document.body.appendChild(dashboardContainer);
        
        // 动态导入客户看板组件
        const { default: KikimamiDashboardPanel } = await import('../components/KikimamiDashboardPanel.vue');
        
        // 创建应用实例并挂载
        const dashboardApp = createApp(KikimamiDashboardPanel);
        
        // 提供内嵌模式标志
        dashboardApp.provide('$inlineMode', false);
        
        // 挂载应用
        const dashboardInstance = dashboardApp.mount('#kikimami-dashboard-container');
        
        // 将实例保存到全局，以便后续可以调用其方法
        (window as any).kikimamiDashboard = dashboardInstance;
        
        console.log('客户看板已初始化');
    } catch (error) {
        console.error('初始化客户看板失败:', error);
    }
}